<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>{$__ARCHIVES__.title}</title>
    <link rel="stylesheet" type="text/css" href="__CDN__/static/css/public.css">
    <link rel="stylesheet" type="text/css" href="__CDN__/static/css/jquery.bxslider.css">
    <link rel="stylesheet" type="text/css" href="__CDN__/static/css/style.css">
    <link rel="stylesheet" type="text/scss" href="__CDN__/static/css/index.scss">
    <link rel="stylesheet" href="__CDN__/static/css/swiper-bundle.css">

    <script type="text/javascript" src="__CDN__/static/js/jquery1.11.3.min.js"></script>
    <script type="text/javascript" src="__CDN__/static/js/jquery.bxslider.min.js"></script>
    <script type="text/javascript" src="__CDN__/static/js/index.js"></script>
    <script type="text/javascript" src="__CDN__/static/js/swiper-boundle.js"></script>
    <style>
        .tab-item {
            display: none;
        }

        .show {
            display: block;
        }
    </style>
</head>

<body>
<!--top-->
<header id="header"></header>
<!--top-->
<!--banner-->
<div class="bannerCont bannerContCourse"></div>
<!--/banner-->

<div class="main">
    <div class="wrap clearfloat">
        <div class="contUp" id="contLeft">
            <div class="contUpTit">
                <span><img src="__CDN__/static/image/dengPao.png"></span>
                <h2>解决方案</h2>
                <h3>Solution</h3>
            </div>
            <div class="contUpNav">
                <ul>
                    {cms:channellist id='nav' type='son' typeid="$__CHANNEL__.parent_id != 0 ? $__CHANNEL__.parent_id :
                    $__CHANNEL__.id"}
                    <li class="{if $nav->is_active} on {/if}">
                        <h3><a href="{$nav.url}">{$nav.name}</a></h3>
                    </li>
                    {/cms:channellist}
                </ul>
            </div>

        </div>
        <div class="contDown">
            <div class="contRightH clearfloat">
                <h2 class="contRightTit">{$__CHANNEL__.name}</h2>
                <p>您的位置：
                    {cms:breadcrumb id="item"}
                    <a href="{$item.url}">{$item.name}</a>&gt;
                    {/cms:breadcrumb}
                </p>
            </div>
            <div class="contRightLine"></div>
            <div class="productDetail">
                
                
                
                <div class="contRightWrap">
                    {if empty($__ARCHIVES__.images)}
                    <div class="aboutBrief upDetail clearfloat aboutFlex">
							<div>
								<div class="small">
									<img src="{cms:archives name='image'}" alt="" class="phone_img">
									<div class="mask" style="display: none; left: 0px; top: 208px;"></div>
									<div class="big" style="display: none;">
										<img src="{cms:archives name='image'}" alt="" class="big_img" style="left: 0px; top: -564.308px;">
									</div>
								</div>
								<div class="mamall">
									<img src="{cms:archives name='image'}" alt="" class="phone_img">
								</div>
								<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
									<div class="swiper-wrapper" id="swiper-wrapper-81a3f78c5ccf7d51" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
									    
										<div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 4" style="width: 166.667px;">
											<img class="prictImg" src="{cms:archives name='image'}" alt="">
										</div>
										
										
										
									</div>
									<div class="swiper-button-prev swiper-button-black swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-81a3f78c5ccf7d51" aria-disabled="true"></div>
									<div class="swiper-button-next swiper-button-black" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-81a3f78c5ccf7d51" aria-disabled="false"></div>
								<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
							</div>
						{else /}
						
						{php} $__list = explode(",", $__ARCHIVES__['images']);{/php}
						
						
						<div class="aboutBrief upDetail clearfloat aboutFlex">
							<div>
								<div class="small">
									<img src="{$__list[0]}" alt="" class="phone_img">
									<div class="mask" style="display: none; left: 0px; top: 208px;"></div>
									<div class="big" style="display: none;">
										<img src="{$__list[0]}" alt="" class="big_img" style="left: 0px; top: -564.308px;">
									</div>
								</div>
								<div class="mamall">
									<img src="{$__list[0]}" alt="" class="phone_img">
								</div>
								<div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
									<div class="swiper-wrapper" id="swiper-wrapper-81a3f78c5ccf7d51" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
									    {volist name='$__list' id='ll'}
										<div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 4" style="width: 166.667px;">
											<img class="prictImg" src="{$ll}" alt="">
										</div>
										{/volist}
										
									</div>
									<div class="swiper-button-prev swiper-button-black swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-81a3f78c5ccf7d51" aria-disabled="true"></div>
									<div class="swiper-button-next swiper-button-black" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-81a3f78c5ccf7d51" aria-disabled="false"></div>
								<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
							</div>
						
					    
						{/if}
                    
                    
                    
                    
						


							<div>
								<h2 style=" font-size: 28px;color: #464646;padding: 15px 0 0 10px">{cms:archives name='title'}</h2>
								
								{php}$label = json_decode($__ARCHIVES__['label'],true);{/php}
                                {volist name="label" id="labelitem" key="k"}
                                <p style="line-height: 20px;">
                                    {$labelitem}
                                </p>
                                {/volist}
							<button class="productBtn"><a class="productBtn" href="/d/contact/post.html">立即询盘</a>
                            </button>
								 {cms:prevnext id="next" type="next" archives="__ARCHIVES__.id" channel="__CHANNEL__.id"}
                                <button class="productBtn"><a class="productBtn" href="{$next.url}">下一个产品</a></button>
                                {/cms:prevnext}
							</div>
						</div>
					</div>
                
                
                
                
                
                <!--<div class="contRightWrap">-->
                <!--    <div class="aboutBrief upDetail clearfloat aboutFlex">-->
                <!--        <img src="{cms:archives name='image'}">-->
                <!--        <div>-->
                <!--            <h2 style="font-size: 28px;color: #464646;padding: 15px 0 0 10px">-->
                <!--                {cms:archives name='title'}</h2>-->

                            
                

                           

                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->

                <div class="contRightLine"></div>


                <div style="display: flex">
                    <ul id="tab" class="wp">
                        <li tabid="1" class="current">产品详情</li>
                        <li tabid="2" class="">文件下载</li>
                    </ul>
                </div>
                <div id="box">
                    <div class="tab-item show">

                        {$__ARCHIVES__.content|table_fix}
                    </div>
                    <div class="tab-item">
                        <div class="middleDetail">
                            {php}$downloadurls = json_decode($__ARCHIVES__['downloadurls'],true);{/php}
                            {volist name="downloadurls" id="urls" key="k"}
                            <div class="fileDownload">
                                <div>
                                    {$urls.name}
                                    <br>
                                    <span>发布时间：{cms:archives name='publishtime|datetime'} <br>更新时间：{cms:archives name='updatetime|datetime'}</span>
                                </div>
                                {if $user}
                                <button class=""><img class="xiaZai" src="__CDN__/static/image/xiazai.png" alt=""><a
                                        href="{:addon_url('cms/archives/downPdfFile',['id' =>$__ARCHIVES__.id,'i'=>$k-1])}"><span>立即下载</span></a>
                                </button>
                                {else/}
                                <button><img class="xiaZai" src="__CDN__/static/image/xiazai.png" alt=""><span><a
                                        href="/index/user/login.html">未登录</a></span></button>
                                {/if}
                            </div>
                            {/volist}

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<footer class="footer"></footer>
<script type="text/javascript">
    $(".footer").load("/addons/cms/index/getFooter")
    $("#header").load("/addons/cms/index/getHeader", function () {
        // 底部和公共信息
        $.getScript("__CDN__/static/js/jquery1.11.3.min.js?v={$site.version}")
        $.getScript("__CDN__/static/js/jquery.bxslider.min.js?v={$site.version}")
        $.getScript("__CDN__/static/js/index.js?v={$site.version}")
    })
</script>

<script type="text/javascript">


    $("#tab > li").click(function () {
        // 修改tab标签样式
        $(this).attr("class", "current")
        $(this).siblings().attr("class", "")
        // 获取tab ID
        var itemId = $(this).attr("tabid") - 1;
        // 切换到指定tab
        $("#box > div").eq(itemId).attr("class", "show")
        $("#box > div").eq(itemId).siblings().attr("class", "tab-item")
    })
    
    $(".prictImg").click((e) => {
				console.log(e.target.currentSrc)
				let imgUrl = e.target.currentSrc
				$(".phone_img").attr('src', imgUrl);
				$(".big_img").attr('src', imgUrl);
			})
</script>

<script>
			// 当页面加载完成后执行
			window.addEventListener('load', function () {

				//查找元素
				//small 小图div
				var small = document.querySelector('.small')
				//小图遮罩层div
				var mask = document.querySelector('.mask')
				//大图div
				var big = document.querySelector('.big')

				//当鼠标经过 主图时 时执行-显示大图
				small.addEventListener('mouseover', function () {
					mask.style.display = 'block'
					big.style.display = 'block'
				})

				//当鼠标离开 主图时 时执行-隐藏大图
				small.addEventListener('mouseout', function () {
					mask.style.display = 'none'
					big.style.display = 'none'
				})

				//当鼠标在主图内 移动时 执行
				small.addEventListener('mousemove', function (e) {
					//获取鼠标在主图盒子内的XY坐标,减去偏移值
					var x = e.pageX - this.offsetLeft
					var y = e.pageY - this.offsetTop

					//将获取到的鼠标XY坐标,赋值给 mask遮罩层盒子的定位坐标
					//注意一定后面+'px',不然没效果
					var maskX = x - mask.offsetWidth / 2
					var maskY = y - mask.offsetTop / 2

					//遮罩最大移动距离
					var maskMax = small.offsetWidth - mask.offsetWidth

					//限制X轴移动范围
					if (maskX <= 0) {
						maskX = 0
					} else if (maskX >= maskMax) {
						maskX = small.offsetWidth - mask.offsetWidth
					}

					//限制Y轴移动范围
					if (maskY <= 0) {
						maskY = 0
					} else if (maskY >= maskMax) {
						maskY = maskMax
					}

					mask.style.left = maskX + 'px'
					mask.style.top = maskY + 'px'

					//获取大图
					var big_img = document.querySelector('.big_img')

					//大图最大移动距离
					var bigImgMax = big_img.offsetWidth - big.offsetWidth

					//大图的X轴移动距离
					var bigImgX = maskX * bigImgMax / maskMax

					//大图的Y轴移动距离
					var bigImgY = maskY * bigImgMax / maskMax

					//坐标赋值,让大图跟着遮罩层一起移动
					big_img.style.left = -bigImgX + 'px'
					big_img.style.top = -bigImgY + 'px'
				})
			})
		</script>
<script>
			var mySwiper = new Swiper('.swiper-container', {
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',

				},
				slidesPerView: 3,
			})
		</script>

</body>

</html>